<template>
  <div class="des_container flex-space-between" ref="desc" v-bind="$attrs">
    <div v-if="descConfig.type === 'img'" class="des_head">
      <el-image 
        :src="descModel['picUrl']" 
        class="des_img" 
        fit="fill" 
        lazy>
        <div slot="error" class="slot-error flex-bcenter height-100">
          <i class="el-icon-picture-outline"></i>
          <span style="font-size: 12px">暂无数据</span>
        </div>
      </el-image>
      <div class="des_head_footer"></div>
    </div>
    <el-descriptions v-bind="$attrs" class="des_content flex-1" :size="descConfig.size">
      <el-descriptions-item v-for="item in descConfigItem" :label="item.label" :key="item.fieIdName" :span="item.span">
        <template v-if="item.slotName === 'more'">
          <div class="moreContainer">
            <div class="moreContent" ref="moreContent" :style="{ 'max-height': moreBtn ? moreHeight : '' }">
              {{ descModel[item.fieIdName] }}
            </div>
            <span class="moreBtn" @click="clickLookMore" v-if="moreBtn">
              展开更多
            </span>
          </div>
        </template>
        <template v-else-if="item.slotName">
          <slot :name="item.slotName" :scope="item"></slot>
        </template>
        <template v-else>
          <span>
            {{ descModel[item.fieIdName] }}
          </span>
        </template>
        <slot name="more"></slot>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
/**
 * @description 详情页配置
 * @param {Object} descConfig -详情页基础配置
 * @param {Array} descConfigItem -表单数据项
 * @param {Object} descModel -来自后台得数据源
 *  <base-descriptions
      :descConfig="descConfig"
      :descModel="descModel"
      :descData="descData">
    </base-descriptions>
 */
export default {
  props: {
    descConfig: {
      type: Object,
      default: () => ({}),
    },
    descConfigItem: {
      type: Array,
      default: () => [],
    },
    descModel: {
      type: Object,
      default: () => ({}),
    },
  },
  data () {
    return {
      moreBtn: false,
      moreState: '展开更多',
      moreHeight: 0,
    }
  },
  created () {
  },
  mounted () {
    this.descConfigItem.forEach(item => {
      if(item.slotName === 'more') {
        this.$nextTick(() => {
        // 拿到当前详情得高度
        this.caluculateMoreHeight()
      })
      window.onresize = () => {
        this.moreBtn = false
        setTimeout(() => {
          this.caluculateMoreHeight()
        }, 0)
        }
      } 
    });
  },
  methods: {
    caluculateMoreHeight () {
      const moreContent = this.$refs.moreContent[0].clientHeight
      let singeHeight = 20 || this.$refs.oneHeight.clientHeight
      let moreHeight = singeHeight * 3
      this.moreHeight = `${moreHeight}px`
      if (moreContent > moreHeight) {
        this.moreBtn = true
      } else {
        this.moreBtn = false
      }
    },
    clickLookMore () {
      this.moreBtn = !this.moreBtn
      this.moreState = this.moreBtn ? '展开更多' : '收起'
    }
  },

}
</script>

<style lang="less" scoped>
/deep/ .el-descriptions__body {
  background-color: transparent !important;
}
/deep/ el-descriptions-item__label {
  color: #8fabbf;
}
/deep/ .el-descriptions-item__content {
  color: #fff;
}
.des_container {
  // height: 200px;
  margin-bottom: 15px;
  .des_head {
    width: 278px;
    border: 1px solid #309eff;
    padding: 12px;
    position: relative;
    .des_img {
      width: 100%;
      height: 100%;
    }
    &::after {
      position: absolute;
      top: 5px;
      left: 5px;
      content: "";
      border-top: 5px solid #309eff;
      border-right: 5px solid transparent;
      border-bottom: 5px solid transparent;
    }
    &::before {
      position: absolute;
      top: 5px;
      right: 5px;
      content: "";
      border-top: 5px solid #309eff;
      border-left: 5px solid transparent;
      border-bottom: 5px solid transparent;
    }
    .des_head_footer {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      &::after {
        position: absolute;
        top: -15px;
        left: 5px;
        content: "";
        border-top: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 5px solid #309eff;
      }
      &::before {
        position: absolute;
        top: -15px;
        right: 5px;
        content: "";
        border-top: 5px solid transparent;
        border-left: 5px solid transparent;
        border-bottom: 5px solid #309eff;
      }
    }
    img {
      width: 100%;
      height: 100%;
      background-color: #ccc;
    }
  }
}
.des_content {
  margin-left: 15px;
  overflow: auto;
  .moreContainer {
    color: #fff;
    .moreContent {
      overflow: hidden;
      position: relative;
      transition: all 0.2s ease;
    }
    .moreBtn {
      width: 100%;
      color: #309eff;
      cursor: pointer;
      display: inline-block;
      text-align: right;
    }
  }
}
</style>
